<template>
  <div class="flex direction-column height-100">
    <div class="button-group">
      <el-button type="primary" @click="save">保存</el-button>
    </div>
    <div class="bg-white" style="padding: 60px;flex:1;overflow-y: auto;">
      <el-form ref="form" :model="info" :rules="rules" label-width="160px" class="form-box">
        <el-form-item label="单位名称" prop="enterpriseName">
          <el-input v-model="info.enterpriseName"></el-input>
        </el-form-item>
        <el-form-item label="所属地区" prop="districtBelong">
          <area-picker ref="areaPicker" v-model="info.districtBelong"></area-picker>
        </el-form-item>
        <el-form-item label="联系电话" prop="unitContactNumber">
          <el-input v-model="info.unitContactNumber"></el-input>
        </el-form-item>
        <el-form-item label="所属行业" prop="belongIndustry">
          <dictionary-picker dic-code="HANG_YE_LEI_XING" v-model="info.belongIndustry"></dictionary-picker>
        </el-form-item>
        <el-form-item label="经纬度" prop="lnglat">
          <el-input :value="info.lnglat" readonly @click.native="clickLngLat">
            <template #append>
              <span class="el-icon-location"></span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="单位类型" prop="unitType">
          <dictionary-picker filterable clearable dic-code="DAN_WEI_LEI_XING" v-model="info.unitType"></dictionary-picker>
        </el-form-item>
        <el-form-item label="能管负责人姓名" prop="principal">
          <el-input v-model="info.principal"></el-input>
        </el-form-item>
        <el-form-item label="能管负责人电话" prop="principalPhone">
          <el-input v-model="info.principalPhone"></el-input>
        </el-form-item>
        <el-form-item label="能耗水平" prop="energyConsumptionLevel">
          <dictionary-picker v-model="info.energyConsumptionLevel" dic-code="NENG_HAO_SHUI_PING"></dictionary-picker>
        </el-form-item>
        <el-form-item label="所属领域">
          <dictionary-picker dic-code="QI_YE_ZI_DING_YI_QU_YU" v-model="info.belongField"></dictionary-picker>
        </el-form-item>
        <el-form-item label="社会信用代码">
          <el-input v-model="info.socialCreditCode"></el-input>
        </el-form-item>
        <el-form-item label="是否央企">
          <el-radio-group v-model="info.centralEnterprises">
            <el-radio label="0">是</el-radio>
            <el-radio label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="法人代码">
          <el-input v-model="info.corporateCode"></el-input>
        </el-form-item>
        <el-form-item label="是否能源加工转企业">
          <el-radio-group v-model="info.transferEnterprise">
            <el-radio label="0">是</el-radio>
            <el-radio label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="法人代表">
          <el-input v-model="info.legalRepresentative"></el-input>
        </el-form-item>
        <el-form-item label="单位地址">
          <el-input v-model="info.address"></el-input>
        </el-form-item>
        <el-form-item label="邮政编码">
          <el-input v-model="info.zipCode"></el-input>
        </el-form-item>
        <el-form-item label="企业网址">
          <el-input v-model="info.enterpriseUrl"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="info.email"></el-input>
        </el-form-item>
        <el-form-item label="传真">
          <el-input v-model="info.fax"></el-input>
        </el-form-item>
        <el-form-item label="注册日期">
          <el-date-picker type="date" v-model="info.registrationDate" class="width-100" format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="注册资本">
          <el-input v-model="info.registeredCapital"></el-input>
        </el-form-item>
        <el-form-item label="所属集团">
          <el-input v-model="info.affiliatedGroup"></el-input>
        </el-form-item>
        <el-form-item label="集团地址">
          <el-input v-model="info.groupAddress"></el-input>
        </el-form-item>
        <el-form-item label="集团类型">
          <el-input v-model="info.groupType"></el-input>
        </el-form-item>
        <el-form-item label="能源管理机构">
          <el-input v-model="info.managementAgency"></el-input>
        </el-form-item>
        <el-form-item label="主管节能领导">
          <el-input v-model="info.supervisor"></el-input>
        </el-form-item>
        <el-form-item label="主管节能领导电话">
          <el-input v-model="info.supervisorPhone"></el-input>
        </el-form-item>
        <el-form-item label="能源管理师证号">
          <el-input v-model="info.managerId"></el-input>
        </el-form-item>
        <el-form-item label="是否能源管理体系认证">
          <el-input v-model="info.managementCertification"></el-input>
        </el-form-item>
        <el-form-item label="认证日期">
          <el-date-picker type="date" v-model="info.certificationDate" class="width-100" format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="认证机构">
          <el-input v-model="info.certificationBody"></el-input>
        </el-form-item>
        <el-form-item label="企业主要生产线名称">
          <el-input v-model="info.mainProductionLine"></el-input>
        </el-form-item>
        <el-form-item label="企业主导产品">
          <el-input v-model="info.leadingProduct"></el-input>
        </el-form-item>
        <el-form-item label="备注" style="width: 100%;">
          <el-input v-model="info.remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <location-picker ref="locationPicker" v-model="info.lnglat"></location-picker>
    </div>
  </div>
</template>

<script>
import AreaPicker from '@/components/area-picker'
import DictionaryPicker from '@/components/dictionary-picker'
import { loadEnterprise, saveOrUpdate } from '@/api/enterprose'
import LocationPicker from '@/components/location-picker'
import REGEXP from '@/utils/regexp'

const api = {
  loadEnterprise,
  saveOrUpdate,
}

export default {
  name: 'enterprise-basic-information',
  components: { AreaPicker, DictionaryPicker, LocationPicker },
  data () {
    return {
      info: {
        // 主键
        id: '',
        // 单位名称
        enterpriseName: '',
        // 社会信用代码
        socialCreditCode: '',
        // 是否央企 0、是；1、否
        centralEnterprises: '1',
        // 法人代码
        corporateCode: '',
        // 所属地区
        districtBelong: '',
        // 单位联系电话
        unitContactNumber: '',
        // 所属行业
        belongIndustry: '',
        // 所属领域
        belongField: '',
        // 是否能源加工转企业 0、是；1、否
        transferEnterprise: '0',
        // 能耗水平
        energyConsumptionLevel: '',
        // 经度
        lnglat: '',
        longitude: '',
        // 纬度
        latitude: '',
        // 单位类型
        unitType: '',
        // 法人代表
        legalRepresentative: '',
        // 单位地址
        address: '',
        // 邮政编码
        zipCode: '',
        // 企业网址
        enterpriseUrl: '',
        // 电子邮箱
        email: '',
        // 传真
        fax: '',
        // 注册日期
        registrationDate: '',
        // 注册资本
        registeredCapital: '',
        // 备注
        remark: '',
        // 所属集团
        affiliatedGroup: '',
        // 集团地址
        groupAddress: '',
        // 集团类型
        groupType: '',
        // 能源管理机构.
        managementAgency: '',
        // 主管节能领导
        supervisor: '',
        // 主管节能领导电话
        supervisorPhone: '',
        // 能管负责人姓名
        principal: '',
        // 能管负责人电话
        principalPhone: '',
        // 能源管理师证号
        managerId: '',
        // 是否能源管理体系认证 0、是；1、否
        managementCertification: '',
        // 认证日期
        certificationDate: '',
        // 认证机构
        certificationBody: '',
        // 企业主要生产线名称
        mainProductionLine: '',
        // 企业主导产品
        leadingProduct: '',
        // 租户ID
        // tenantId: '',
        // 创建时间
        // creationTime: '',
        // 创建用户
        // creationId: '',
        // 修改时间
        // updateTime: '',
        // 修改用户
        // updateId: '',
      },
      rules: {
        enterpriseName: [{ required: true, message: '必填项' }],
        unitContactNumber: [
          { required: true, message: '必填项' },
          {
            validator (rule, value, callback) {
              if (REGEXP.PHONE_NUMBER.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的手机号码'))
              }
            }
          }
        ],

        districtBelong: [{ required: true, message: '必填项' }],
        belongIndustry: [{ required: true, message: '必填项' }],
        unitType: [{ required: true, message: '必填项' }],
        lnglat: [{ required: true, message: '必填项' }],
        principal: [{ required: true, message: '必填项' }],
        principalPhone: [{ required: true, message: '必填项' }],
      },
    }
  },
  mounted () {
    this.query()
  },
  methods: {
    query () {
      // todo
      const id = this.$store.state.user.userInfo.tenantId
      if (!id) {
        // return this.$message.error('tenantId 不存在')
        console.warn('tenantId 不存在')
        return false
      }
      return api.loadEnterprise(id).then(res => {
        if (res.code === 200) {
          this.info = {
            ...this.info,
            ...res.data,
          }
          const { longitude, latitude } = this.info
          this.info.lnglat = (longitude && latitude) ? `${longitude},${latitude}` : ''
        }
      })
    },
    save () {
      this.$refs.form.validate().then(() => {
        const params = { ...this.info }
        let lnglat = params.lnglat
        lnglat = lnglat.split(',')
        if (lnglat.length === 2) {
          params.longitude = lnglat[0]
          params.latitude = lnglat[1]
        }
        delete params.lnglat
        params.districtBelongName = this.$refs.areaPicker.getLabel()
        api.saveOrUpdate(params).then(res => {
          if (res.code === 200) {
            this.$message.success('保存成功')
          }
        })
      }).catch(() => {})
    },
    clickLngLat () {
      this.$refs.locationPicker.open()
    },
  },
}
</script>
